<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title>Пример-4 Отображение  на Яндекс.Картах файлов в формате GPX</title> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <script src="http://api-maps.yandex.ru/1.1/index.xml?key=ABXA2E0BAAAAPgcfPgMAff4OWfrFXJrcsgg25gwcdVqnFO0AAAAAAAAAAAD8qUXm8a-Yr59XYrH5J5Ex3uDwRQ==" type="text/javascript"></script> 
<style> 
 
 
.link:hover
{
text-decoration: none;
}
.link
{
cursor: pointer;
text-decoration: underline;
}
 
 
 
#show_trek1 {
 
    padding: 8px 0 6px 35px;
    line-height: 30px;
    margin-bottom: 3px;
}
 
#show_trek2 {
 
    padding: 8px 0 6px 35px;
    line-height: 30px;
    margin: 3px 0;
}
 
#show_trek3 {
 
    padding: 8px 0 6px 35px;
    line-height: 30px;
    margin: 3px 0;
}
 
 
    </style> 
 
 <script type="text/javascript"> 
 
 
  // Создание обработчика для события window.onLoad
        YMaps.jQuery(function () {
            // Создание экземпляра карты и его привязка к созданному контейнеру
            var map = new YMaps.Map(YMaps.jQuery("#YMapsID")[0]);
 
            // Установка для карты ее центра и масштаба
            map.setCenter(new YMaps.GeoPoint(43.99150,56.31534), 13);
 
            // Добавление элементов управления
            map.enableScrollZoom();
            map.addControl(new YMaps.ToolBar());
            map.addControl(new YMaps.TypeControl());
            map.addControl(new YMaps.Zoom());
 
 // Создание стиля для ломанной
            var s = new YMaps.Style();
            s.lineStyle = new YMaps.LineStyle();
            s.lineStyle.strokeColor = "FF0000AA";
            s.lineStyle.strokeWidth = "5";
            YMaps.Styles.add("example#CustomLine", s);
 
 
 var gpx1 = new YMaps.GPX("http://webmap-blog.ru/gpx/20090430-085119.xml");
YMaps.Events.observe(gpx1, gpx1.Events.Fault, function (gpx1, error) {
                alert("Ошибка: " + error);
            });
 
YMaps.Events.observe( gpx1 , gpx1 .Events.Load, function ( gpx1 ) {
                 gpx1 .get(0).setStyle("example#CustomLine");
            });
 
 
YMaps.jQuery("#show_trek1").toggle(function(){
map.addOverlay(gpx1);
YMaps.jQuery(this).css("font-weight","bold");
}, function(){
map.removeOverlay(gpx1);
YMaps.jQuery(this).css("font-weight","normal");
});     
 
 
 var gpx2 = new YMaps.GPX("http://webmap-blog.ru/gpx/20090930-103240.xml");
YMaps.Events.observe(gpx2, gpx2.Events.Fault, function (gpx2, error) {
                alert("Ошибка: " + error);
            });
 
 
YMaps.jQuery("#show_trek2").toggle(function(){
map.addOverlay(gpx2);
YMaps.jQuery(this).css("font-weight","bold");
}, function(){
map.removeOverlay(gpx2);
YMaps.jQuery(this).css("font-weight","normal");
});
 
 var gpx3 = new YMaps.GPX("http://webmap-blog.ru/gpx/20100405-173835.xml");
YMaps.Events.observe(gpx3, gpx3.Events.Fault, function (gpx3, error) {
                alert("Ошибка: " + error);
            });
 
 
YMaps.jQuery("#show_trek3").toggle(function(){
map.addOverlay(gpx3);
YMaps.jQuery(this).css("font-weight","bold");
}, function(){
map.removeOverlay(gpx3);
YMaps.jQuery(this).css("font-weight","normal");
});
 
 })
 
    </script> 
</head> 
 
<body> 
    <table border="0" cellspacing="5" cellpadding="5"> 
  <tr> 
    <td><div id="YMapsID" style="width:800px;height:600px"></div></td> 
    <td valign="top"> 
    <p><span id="show_trek1" class="link">Трек-1</span></p> 
    <p><span id="show_trek2" class="link">Трек-2</span></p> 
   <p><span id="show_trek3" class="link">Трек-3</span></p> 
</td> 
  </tr>   
</table> 
</body> 
 
</html>